<template>
  <view
    class="tn-icon"
    :class="[iconClass]"
    :style="iconStyle"
  >
    <view
      v-if="isImg"
      class="tn-icon__image">
      <image
        class="image"
        :src="icon"
        :mode="imgMode"
      />
    </view>
    <text
      v-else
      class="tnIconFont tn-icon__icon"
      :class="[`tn-icon-${icon}`]"
    ></text>
  </view>
</template>

<script lang="ts" setup>
import { iconProps } from '../../../types/tn-icon'
import { computed, watch, CSSProperties } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'
import { TuniaoSize, TuniaoSizes } from '@/tuniao-ui/types/tuniao-ui'

const props = defineProps(iconProps)

const { generateColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '')
// 监听颜色变化实时修改颜色对应的属性
watch(() => props.color, (nVal) => {
  componentColorInfo = generateColorInfo(nVal)
})

/**
 * 判断是否为图片
 * 如果包含/则认为是图片
 */
const isImg = computed<boolean>(()=> {
  return props?.icon?.indexOf('/') !== -1
})

/**
 * 图标样式
 */
const iconStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  let size = ''
  if (!!props?.size && !TuniaoSizes.includes(props.size as TuniaoSize)) {
    size = handleValueWithUnit(props.size)
  }
  if (isImg.value) {
    if (size !== '') {
      style.width = size
      style.height = size
    }
  } else {
    if (size !== '') {
      style.fontSize = size
    }
    if (componentColorInfo.style?.color) {
      style.color = componentColorInfo.style.color
    }
  }
  if (!!props.top) {
    style.top = handleValueWithUnit(props.top)
  }
  return style
})

// 图标类
const iconClass = computed<string>(() => {
  let clazz: string [] = []
  if (isImg.value) {
    clazz.push('tn-icon--image')
  }
  if (!!props?.size && TuniaoSizes.includes(props.size as TuniaoSize)) {
    clazz.push(`tn-icon--${props.size}`)
  }
  if (componentColorInfo.class.length > 0) {
    clazz.push(...componentColorInfo.class)
  }
  if (!!props.type) {
    clazz.push(`tn-type-${props.type}--font`)
  }
  if (props.bold) {
    clazz.push('tn-text-bold')
  }
  return clazz.join(' ')
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';
// 引入图标
@import '../lib/iconfont.scss';

.tn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // font-size: inherit;
  border-radius: inherit;

  &--image {
    width: 38rpx;
    height: 38rpx;
  }

  &__image {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    .image {
      width: 100%;
      height: 100%;
      will-change: transform;
      border-radius: inherit;
    }
  }

  /* 内置尺寸 start */
  &--sm {
    font-size: 24rpx;
    &.tn-icon--image {
      width: 30rpx;
      height: 30rpx;
    }
  }
  &--lg {
    font-size: 34rpx;
    &.tn-icon--image {
      width: 38rpx;
      height: 38rpx;
    }
  }
  &--xl {
    font-size: 40rpx;
    &.tn-icon--image {
      width: 46rpx;
      height: 46rpx;
    }
  }
  /* 内置尺寸 end */
}
</style>
